import 'package:flutter/material.dart';
import 'package:flutter_jojo_test/common/resource/color.dart';
import 'package:flutter_jojo_test/ui/main/state.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

Widget MainBottomBar(MainState state) {
  return Container(
    height: 66.h,
    decoration: BoxDecoration(
        color: ThemeColor.g2.value,
        borderRadius: BorderRadius.only(
            topLeft: Radius.circular(8.r), topRight: Radius.circular(8.r))),
    child: Row(
      children: [
        Expanded(
          child: GestureDetector(
            onTap: () {
              state.index.value = 0;
            },
            child: Container(
              width: 75.w,
              height: 66.h,
              color: Colors.transparent,
              child: Center(
                child: Image.asset(
                  state.index.value == 0
                      ? "assets/images/tab_one_selected.png"
                      : "assets/images/tab_one_unselected.png",
                  width: 24.r,
                  height: 24.r,
                ),
              ),
            ),
          ),
        ),
        Expanded(
          child: GestureDetector(
            behavior: HitTestBehavior.opaque,
            onTap: () {
              state.index.value = 1;
            },
            child: Container(
              width: 75.w,
              height: 66.h,
              color: Colors.transparent,
              child: Center(
                child: Image.asset(
                  state.index.value == 1
                      ? "assets/images/tab_two_selected.png"
                      : "assets/images/tab_two_unselected.png",
                  width: 24.r,
                  height: 24.r,
                ),
              ),
            ),
          ),
        ),
        Expanded(
          child: GestureDetector(
            onTap: () {},
            child: Container(
              width: 75.w,
              height: 66.h,
              color: Colors.transparent,
              child: Center(
                child: Image.asset(
                  "assets/images/icon_home_bar_publish.png",
                  width: 48.r,
                  height: 48.r,
                ),
              ),
            ),
          ),
        ),
        Expanded(
          child: GestureDetector(
            onTap: () {
              state.index.value = 2;
            },
            child: Container(
              width: 75.w,
              height: 66.h,
              color: Colors.transparent,
              child: Center(
                child: Image.asset(
                  state.index.value == 2
                      ? "assets/images/tab_three_selected.png"
                      : "assets/images/tab_three_unselected.png",
                  width: 24.r,
                  height: 24.r,
                ),
              ),
            ),
          ),
        ),
        Expanded(
          child: GestureDetector(
            onTap: () {
              state.index.value = 3;
            },
            child: Container(
              width: 75.w,
              height: 66.h,
              color: Colors.transparent,
              child: Center(
                child: Image.asset(
                  state.index.value == 3
                      ? "assets/images/tab_four_selected.png"
                      : "assets/images/tab_four_unselected.png",
                  width: 24.r,
                  height: 24.r,
                ),
              ),
            ),
          ),
        ),
      ],
    ),
  );
}
